<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
 <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
 
<%@page isELIgnored="false" %>

<%@include file="header.jsp" %>

	<c:if test="${requestScope.isSearch==true}">
	<div id="workspace" class="grid_8">
		<div id="player" class="grid_8">
			<h1><c:out value="${requestScope.songName}"/> by <c:out value="${requestScope.songAuthor}"/></h1>
			<c:set var="frameSrc"  value="http://www.youtube.com/embed/${requestScope.originalSong.videoId}"/>
			<iframe width="600" height="335px" src="<c:out value="${frameSrc}?rel=0&modestbranding=1&autohide=1&autoplay=1"/> " frameborder="0" allowfullscreen></iframe>
		</div>

		<div id="workspacebanner" class="grid_8">
			<iframe src="http://rcm.amazon.com/e/cm?t=songvers-20&o=1&p=13&l=ur1&category=music&banner=1GVEV71RWYZ472RKWZ02&f=ifr" width="468" height="60" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe><iframe src="http://rcm.amazon.com/e/cm?t=songvers-20&o=1&p=40&l=ur1&category=music&banner=1BREQ5H2YZ7AZ2GZDQ02&f=ifr" width="120" height="60" scrolling="no" border="0" marginwidth="0" style="border:none;margin-left:12px" frameborder="0"></iframe>
		</div>

		<div id="navigationtabs" class="grid_8">
			<ul id="globalnav">
			  <li><a href="JavaScript: changetab('0');" class="here">Other Versions</a></li>
			  <li><a href="JavaScript: changetab('1');" >Cover Versions</a></li>
			  <li><a href="JavaScript: changetab('2');">Parodies</a></li>
			</ul>
			
		</div>
		
		<div id="tab_0" class="grid_8">
			<h1>Other Versions</h1>
			<%@include file="versions.jsp"%>
			<button onclick="loadMoreVersions()" >more!</button>
		</div>
		<div id="tab_1" class="grid_8"><%-- <%@include file="covers.jsp"%> --%></div>
		<div id="tab_2" class="grid_8"><%-- <%@include file="parodies.jsp"%> --%></div>

<%--
		<div id="songversions">
			<h1>Versions</h1>
			<c:set var="cont" value="1"/>
			<c:forEach items="${requestScope.versions}" var="version">
				<c:set var="cont" value="${cont+1}"/>
			 	${version.title} by ${version.author} <a href="javascript:loadSpotifyVersions('${version.title}', '${version.author}', 'songDiv${cont}')">want to listen on spotify?</a>
			 	<div id="songDiv${cont}"></div>
				<br/>		
		 	<br/> <a href="javascript:loadSpotifyVersions('${version.title}', '${version.author}', 'songDiv${cont}')">Play on Spotify</a>
		 	<div id="songDiv${cont}"></div>

 			<c:forEach items="${version.youtubeInfo.thumbnails}" var="thumb">
					<img src="${thumb.url}">
 			</c:forEach>		
			height: ${thumb.height}
			width: ${thumb.width}
 			videoId: ${version.youtubeInfo.videoId}<br/>
 			playerURL: ${version.youtubeInfo.playerUrl}<br/>
 			thumbnails:${version.youtubeInfo.thumbnails}
			</c:forEach>
		</div>
		<div id="covers">
			<h1>Covers</h1>
			<c:forEach items="${requestScope.covers}" var="cover">
				<c:set var="frameSrc"  value="http://www.youtube.com/embed/${cover.mediaGroup.videoId}"/>
				<iframe width="640" height="360" src="<c:out value="${frameSrc}"/> " frameborder="0" allowfullscreen></iframe>
			</c:forEach>
		</div>
		<div id="songparodies">
			<h1>Parodies</h1>
			<c:forEach items="${requestScope.parodies}" var="parody">
				<c:set var="frameSrc"  value="http://www.youtube.com/embed/${parody.mediaGroup.videoId}"/>
				<iframe width="640" height="360" src="<c:out value="${frameSrc}"/> " frameborder="0" allowfullscreen></iframe>
			</c:forEach>
		</div>
 --%>		

	</div>
	<div id="sidebar" class="grid_4">
		<%@include file="sidebar.jsp" %>
	</div>	

	</c:if>	

	<c:if test="${requestScope.isSearch==false}">
		<%@include file="homepage.jsp" %>
	</c:if>

<div id="footer" class="grid_12">
	<%@include file="footer.jsp" %>
</div>


</div>
</body>
</html>